<template>
  <div class="page">
      <div class="enterpriseInfoTab">
        <ul>
          <li class="defaultActive">
            <a> 企业机构管理 </a>
          </li>
        </ul>
      </div>
      <el-form :model="searchForm" :inline="true" class="query-form" size="small">
        <el-form-item  prop="firmName">
          <el-input
            placeholder="请输入企业"
            v-model="searchForm.firmName"
          ></el-input>
        </el-form-item>
        <el-form-item   prop="orptype">
          <el-select v-model="searchForm.orptype" size="small">
            <el-option
              v-for="(item, index) in team"
              :label="item.label"
              :value="item.value"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" size="small" @click="searchList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>       
      <div  class="bg-white top"> 
        <el-row>
          <el-button
          v-if="
            hasPermission(
              'dlyrl:hr:orporateinstitutions:orporateInstitutions:add'
            )
          "
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="add()"
          >新建</el-button
          >
        </el-row>      
        <el-table
          :cell-style="cellStyle"
          style="border: 1px solid #d6cfe2"
          :header-cell-class-name="cellHeadStyle"
          :row-class-name="tableRowClassName"
          :data="dataList"
          size="small"
          height="calc(100% - 80px)"
          v-loading="loading"
          row-key="id"
          class="table"
        >
        <!-- <el-table-column
          prop="updateDate"
          show-overflow-tooltip
          label="更新时间">
        </el-table-column> -->
        <el-table-column prop="name" show-overflow-tooltip label="名称">
        </el-table-column>
        <!-- <el-table-column
          prop="enterpriseInformation"
          show-overflow-tooltip
          label="企业id">
        </el-table-column> -->
        <el-table-column prop="firmName" show-overflow-tooltip label="企业">
        </el-table-column>
        <el-table-column prop="userid" show-overflow-tooltip label="联系人">
        </el-table-column>
        <el-table-column prop="phone" show-overflow-tooltip label="联系方式">
        </el-table-column>
        <el-table-column prop="location" show-overflow-tooltip label="所在地">
        </el-table-column>
        <el-table-column prop="address" show-overflow-tooltip label="地址">
        </el-table-column>
        <el-table-column prop="longitude" show-overflow-tooltip label="经度">
        </el-table-column>
        <el-table-column prop="latitude" show-overflow-tooltip label="纬度">
        </el-table-column>
        <el-table-column prop="remarks" show-overflow-tooltip label="备注信息">
        </el-table-column>
        <el-table-column prop="orptype" show-overflow-tooltip label="类型">
          <!-- (0分公司，1分部，2部门) -->
          <template slot-scope="scope">
            {{
              $dictUtils.getDictLabel("orporate_type", scope.row.orptype, "-")
            }}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          fixed="right"
          :key="Math.random()"
          width="300"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="
                hasPermission(
                  'dlyrl:hr:orporateinstitutions:orporateInstitutions:view'
                )
              "
              type="text"
              size="small"
              icon="el-icon-view"
              @click="view(scope.row.id)"
              >查看</el-button
            >
            <el-button
              v-if="
                hasPermission(
                  'dlyrl:hr:orporateinstitutions:orporateInstitutions:edit'
                )
              "
              type="text"
              size="small"
              icon="el-icon-edit"
              @click="edit(scope.row.id)"
              >修改</el-button
            >
            <el-button
              v-if="
                hasPermission(
                  'dlyrl:hr:orporateinstitutions:orporateInstitutions:del'
                )
              "
              type="text"
              size="small"
              icon="el-icon-delete"
              @click="del(scope.row.id)"
              >删除</el-button
            >
            <el-button
              v-if="
                hasPermission(
                  'dlyrl:hr:orporateinstitutions:orporateInstitutions:add'
                )
              "
              type="text"
              size="small"
              icon="el-icon-circle-plus-outline"
              @click="addChild(scope.row.id, scope.row.name)"
              >添加下级企业机构</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <OrporateInstitutionsForm
      ref="orporateInstitutionsForm"
      @refreshDataList="refreshList"
    ></OrporateInstitutionsForm>
  </div>
</template>

<script>
import tableStyles from "../../../../../utils/mixins.js";
import OrporateInstitutionsForm from "./OrporateInstitutionsForm";
import CityPicker from "@/components/cityPicker";
export default {
  mixins: [tableStyles],
  data() {
    return {
      dataList: [],
      loading: false,
      searchForm: {
        firmName: "",
        orptype: "",
      },
      team: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "分公司",
        },
        {
          value: "1",
          label: "分部",
        },
        {
          value: "2",
          label: "部门",
        },
      ],
    };
  },
  components: {
    CityPicker,
    OrporateInstitutionsForm,
  },
  activated() {
    this.refreshList();
  },

  methods: {
    //搜索接口
    searchList() {
      this.loading = true;
      this.$http({
        url: "/dlyrl/hr/orporateinstitutions/orporateInstitutions/getChildren",
        method: "get",
        params: {
          firmName: this.searchForm.firmName,
          orptype: this.searchForm.orptype,
        },
      }).then(({ data }) => {
        // console.log(data)
        this.dataList = data.children;
        this.loading = false;
      });
    },
    // 获取数据列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: "/dlyrl/hr/orporateinstitutions/orporateInstitutions/treeData",
        method: "get",
        params: {
          firmName: this.searchForm.firmName,
          orptype: this.searchForm.orptype,
        },
      }).then(({ data }) => {
        this.dataList = data.treeData;
        this.loading = false;
      });
    },
    // 新增下级
    addChild(id, name) {
      this.$refs.orporateInstitutionsForm.init("addChild", {
        id: "",
        parent: { id: id, name: name },
      });
    },
    // 新增
    add() {
      this.$refs.orporateInstitutionsForm.init("add", {
        id: "",
        parent: { id: "", name: "" },
      });
    },
    // 修改
    edit(id) {
      this.$refs.orporateInstitutionsForm.init("edit", {
        id: id,
        parent: { id: "", name: "" },
      });
    },
    // 查看
    view(id) {
      this.$refs.orporateInstitutionsForm.init("view", {
        id: id,
        parent: { id: "", name: "" },
      });
    },
    // 删除
    del(id) {
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "/dlyrl/hr/orporateinstitutions/orporateInstitutions/delete",
          method: "delete",
          params: { id: id },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.refreshList();
          }
          this.loading = false;
        });
      });
    },
  },
};
</script>、
<style scoped>
ul {
  margin: 0;
}
</style>